<template>
  <div class="exhibition-detail">
    <div class="page-header">
      <div class="container">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item @click="$router.push('/about')"
              >关于我们</el-breadcrumb-item
            >
            <el-breadcrumb-item @click="$router.push('/past-exhibitions')"
              >往届展会</el-breadcrumb-item
            >
            <el-breadcrumb-item>{{
              exhibition?.title || "展会详情"
            }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>

    <div class="container" v-if="exhibition">
      <!-- 展会基本信息 -->
      <section class="exhibition-info-section">
        <div class="exhibition-header">
          <div class="exhibition-image">
            <img :src="exhibition.image" :alt="exhibition.title" />
            <div class="exhibition-status" :class="exhibition.status">
              {{ getStatusText(exhibition.status) }}
            </div>
          </div>
          <div class="exhibition-basic">
            <h1 class="exhibition-title">{{ exhibition.title }}</h1>
            <div class="exhibition-meta">
              <div class="meta-item">
                <el-icon><Calendar /></el-icon>
                <span>{{ exhibition.date }}</span>
              </div>
              <div class="meta-item">
                <el-icon><Location /></el-icon>
                <span>{{ exhibition.venue }}</span>
              </div>
              <div class="meta-item">
                <el-icon><Grid /></el-icon>
                <span>{{ exhibition.area }}</span>
              </div>
            </div>
            <p class="exhibition-description">{{ exhibition.description }}</p>
            <div class="exhibition-stats">
              <div class="stat-item">
                <span class="stat-number">{{ exhibition.exhibitors }}</span>
                <span class="stat-label">参展企业</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ exhibition.visitors }}</span>
                <span class="stat-label">专业观众</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ exhibition.countries }}</span>
                <span class="stat-label">参与国家</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ exhibition.booths }}</span>
                <span class="stat-label">展位数量</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 详细信息标签页 -->
      <section class="exhibition-details-section">
        <el-tabs v-model="activeTab" class="exhibition-tabs">
          <!-- 展会概况 -->
          <el-tab-pane label="展会概况" name="overview">
            <div class="tab-content">
              <div class="overview-content">
                <h3>展会介绍</h3>
                <div class="content-text">
                  <p>{{ exhibition.fullDescription }}</p>
                </div>

                <h3>展会亮点</h3>
                <div class="highlights-grid">
                  <div
                    class="highlight-item"
                    v-for="highlight in exhibition.highlights"
                    :key="highlight.id"
                  >
                    <div class="highlight-icon">
                      <el-icon><component :is="highlight.icon" /></el-icon>
                    </div>
                    <div class="highlight-content">
                      <h4>{{ highlight.title }}</h4>
                      <p>{{ highlight.description }}</p>
                    </div>
                  </div>
                </div>

                <h3>参展范围</h3>
                <div class="scope-categories">
                  <div
                    class="category-item"
                    v-for="category in exhibition.categories"
                    :key="category.id"
                  >
                    <h4>{{ category.name }}</h4>
                    <ul>
                      <li v-for="item in category.items" :key="item">
                        {{ item }}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 展商名录 -->
          <el-tab-pane label="展品商城" name="exhibitors">
            <div class="tab-content">
              <div class="exhibitors-filter">
                <el-input
                  v-model="exhibitorSearch"
                  placeholder="搜索展商名称..."
                  prefix-icon="Search"
                  clearable
                  @input="filterExhibitors"
                />
                <el-select
                  v-model="selectedCategory"
                  placeholder="选择分类"
                  clearable
                  @change="filterExhibitors"
                >
                  <el-option
                    v-for="category in exhibitorCategories"
                    :key="category"
                    :label="category"
                    :value="category"
                  />
                </el-select>
              </div>

              <div class="exhibitors-grid">
                <div
                  class="exhibitor-card"
                  v-for="exhibitor in filteredExhibitors"
                  :key="exhibitor.id"
                >
                  <div class="exhibitor-logo">
                    <img :src="exhibitor.logo" :alt="exhibitor.name" />
                  </div>
                  <div class="exhibitor-info">
                    <h4>{{ exhibitor.name }}</h4>
                    <p class="exhibitor-category">{{ exhibitor.category }}</p>
                    <p class="exhibitor-country">{{ exhibitor.country }}</p>
                    <div class="exhibitor-booth">
                      展位号：{{ exhibitor.boothNumber }}
                    </div>
                  </div>
                  <div class="exhibitor-actions">
                    <el-button
                      type="primary"
                      size="small"
                      @click="viewExhibitor(exhibitor)"
                    >
                      查看详情
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 活动安排 -->
          <el-tab-pane label="活动安排" name="activities">
            <div class="tab-content">
              <div class="activities-timeline">
                <div
                  class="day-schedule"
                  v-for="day in exhibition.schedule"
                  :key="day.date"
                >
                  <h3 class="day-title">{{ day.date }} {{ day.dayName }}</h3>
                  <div class="activities-list">
                    <div
                      class="activity-item"
                      v-for="activity in day.activities"
                      :key="activity.id"
                    >
                      <div class="activity-time">{{ activity.time }}</div>
                      <div class="activity-content">
                        <h4>{{ activity.title }}</h4>
                        <p>{{ activity.description }}</p>
                        <div class="activity-meta">
                          <span class="activity-location">
                            <el-icon><Location /></el-icon>
                            {{ activity.location }}
                          </span>
                          <span class="activity-type" :class="activity.type">
                            {{ getActivityTypeText(activity.type) }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 展会回顾 -->
          <el-tab-pane label="展会回顾" name="review">
            <div class="tab-content">
              <div class="review-content">
                <h3>展会成果</h3>
                <div class="achievements-grid">
                  <div
                    class="achievement-item"
                    v-for="achievement in exhibition.achievements"
                    :key="achievement.id"
                  >
                    <div class="achievement-number">
                      {{ achievement.value }}
                    </div>
                    <div class="achievement-label">{{ achievement.label }}</div>
                    <div class="achievement-description">
                      {{ achievement.description }}
                    </div>
                  </div>
                </div>

                <h3>精彩瞬间</h3>
                <div class="moments-gallery">
                  <div
                    class="moment-item"
                    v-for="moment in exhibition.moments"
                    :key="moment.id"
                  >
                    <div class="moment-image">
                      <img :src="moment.image" :alt="moment.title" />
                      <div class="moment-overlay">
                        <el-button
                          type="primary"
                          size="small"
                          @click="viewMoment(moment)"
                        >
                          查看大图
                        </el-button>
                      </div>
                    </div>
                    <div class="moment-info">
                      <h4>{{ moment.title }}</h4>
                      <p>{{ moment.description }}</p>
                    </div>
                  </div>
                </div>

                <h3>媒体报道</h3>
                <div class="media-reports">
                  <div
                    class="report-item"
                    v-for="report in exhibition.mediaReports"
                    :key="report.id"
                  >
                    <div class="report-logo">
                      <img :src="report.mediaLogo" :alt="report.mediaName" />
                    </div>
                    <div class="report-content">
                      <h4>{{ report.title }}</h4>
                      <p class="report-media">
                        {{ report.mediaName }} - {{ report.date }}
                      </p>
                      <p>{{ report.summary }}</p>
                      <el-button type="text" @click="viewReport(report)"
                        >阅读全文</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </section>
    </div>

    <!-- 加载状态 -->
    <div v-else class="loading-container">
      <el-empty description="展会信息加载中...">
        <el-button type="primary" @click="loadExhibition">重新加载</el-button>
      </el-empty>
    </div>

    <!-- 图片查看器 -->
    <el-dialog v-model="imageViewerVisible" title="精彩瞬间" width="80%" center>
      <div class="image-viewer" v-if="currentMoment">
        <img
          :src="currentMoment.image"
          :alt="currentMoment.title"
          style="width: 100%; max-height: 70vh; object-fit: contain"
        />
        <div class="image-info">
          <h3>{{ currentMoment.title }}</h3>
          <p>{{ currentMoment.description }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  Calendar,
  Location,
  Grid,
  Trophy,
  Star,
  Connection,
  Document,
  Search,
} from "@element-plus/icons-vue";

export default {
  name: "ExhibitionDetail",
  setup() {
    const route = useRoute();
    const router = useRouter();

    const exhibition = ref(null);
    const activeTab = ref("overview");
    const exhibitorSearch = ref("");
    const selectedCategory = ref("");
    const imageViewerVisible = ref(false);
    const currentMoment = ref(null);

    // 模拟展会详细数据
    const mockExhibition = {
      id: 1,
      title: "2023年中国（广州）国际机器人及智能装备展览会",
      date: "2023年3月15-17日",
      venue: "广州国际会展中心",
      area: "105,000㎡",
      status: "completed",
      exhibitors: "500+",
      visitors: "30,000+",
      countries: 25,
      booths: 800,
      image:
        "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&h=400&fit=crop",
      description:
        "中国机器人产业的年度盛会，汇聚全球顶尖机器人企业，展示最新技术成果。",
      fullDescription:
        '2023年中国（广州）国际机器人及智能装备展览会是中国机器人产业的年度盛会，汇聚了来自全球25个国家和地区的500多家参展企业，展示面积达50,000平方米。展会期间，超过30,000名专业观众到场参观，包括机器人制造商、系统集成商、终端用户等产业链各环节的专业人士。本届展会以"智能制造，创新未来"为主题，全面展示了工业机器人、服务机器人、特种机器人等各类机器人产品及相关技术解决方案。',
      highlights: [
        {
          id: 1,
          icon: "Trophy",
          title: "行业领先",
          description: "汇聚全球顶尖机器人企业，展示最新技术成果",
        },
        {
          id: 2,
          icon: "Star",
          title: "专业权威",
          description: "30,000+专业观众，产业链全覆盖",
        },
        {
          id: 3,
          icon: "Connection",
          title: "商务对接",
          description: "一对一商务对接，促进产业合作",
        },
        {
          id: 4,
          icon: "Document",
          title: "技术论坛",
          description: "高端技术论坛，分享前沿技术",
        },
      ],
      categories: [
        {
          id: 1,
          name: "工业机器人",
          items: [
            "焊接机器人",
            "装配机器人",
            "搬运机器人",
            "喷涂机器人",
            "码垛机器人",
          ],
        },
        {
          id: 2,
          name: "服务机器人",
          items: [
            "清洁机器人",
            "导览机器人",
            "配送机器人",
            "陪伴机器人",
            "医疗机器人",
          ],
        },
        {
          id: 3,
          name: "特种机器人",
          items: [
            "军用机器人",
            "救援机器人",
            "探测机器人",
            "安防机器人",
            "农业机器人",
          ],
        },
      ],
      exhibitorsList: [
        {
          id: 1,
          name: "优必选科技",
          category: "服务机器人",
          country: "中国",
          boothNumber: "A1-001",
          logo: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=100&h=100&fit=crop",
        },
        {
          id: 2,
          name: "ABB机器人",
          category: "工业机器人",
          country: "瑞士",
          boothNumber: "B2-015",
          logo: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=100&h=100&fit=crop",
        },
        {
          id: 3,
          name: "库卡机器人",
          category: "工业机器人",
          country: "德国",
          boothNumber: "B2-020",
          logo: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=100&h=100&fit=crop",
        },
        {
          id: 4,
          name: "科沃斯机器人",
          category: "服务机器人",
          country: "中国",
          boothNumber: "A1-050",
          logo: "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=100&h=100&fit=crop",
        },
      ],
      schedule: [
        {
          date: "2023-03-15",
          dayName: "第一天",
          activities: [
            {
              id: 1,
              time: "09:00-09:30",
              title: "开幕式",
              description: "展会开幕仪式，政府领导及行业专家致辞",
              location: "中央舞台",
              type: "ceremony",
            },
            {
              id: 2,
              time: "10:00-12:00",
              title: "主题论坛：智能制造的未来",
              description: "邀请行业专家分享智能制造发展趋势",
              location: "会议室A",
              type: "forum",
            },
            {
              id: 3,
              time: "14:00-16:00",
              title: "产品发布会",
              description: "多家企业发布最新机器人产品",
              location: "发布厅",
              type: "launch",
            },
          ],
        },
        {
          date: "2023-03-16",
          dayName: "第二天",
          activities: [
            {
              id: 4,
              time: "09:00-11:00",
              title: "技术交流会",
              description: "机器人核心技术研讨",
              location: "会议室B",
              type: "conference",
            },
            {
              id: 5,
              time: "14:00-17:00",
              title: "商务对接会",
              description: "展商与观众一对一商务对接",
              location: "对接区",
              type: "business",
            },
          ],
        },
      ],
      achievements: [
        {
          id: 1,
          value: "500+",
          label: "参展企业",
          description: "来自25个国家和地区",
        },
        {
          id: 2,
          value: "30,000+",
          label: "专业观众",
          description: "产业链全覆盖",
        },
        {
          id: 3,
          value: "1,200+",
          label: "商务对接",
          description: "促成意向合作",
        },
        {
          id: 4,
          value: "50+",
          label: "新品发布",
          description: "展示最新技术成果",
        },
      ],
      moments: [
        {
          id: 1,
          title: "开幕式盛况",
          description: "政府领导、行业专家共同为展会揭幕",
          image:
            "https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=400&h=300&fit=crop",
        },
        {
          id: 2,
          title: "产品演示",
          description: "最新机器人产品现场演示",
          image:
            "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=300&fit=crop",
        },
        {
          id: 3,
          title: "商务洽谈",
          description: "展商与观众深度交流合作",
          image:
            "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=400&h=300&fit=crop",
        },
      ],
      mediaReports: [
        {
          id: 1,
          title: "2023广州机器人展圆满落幕，成果丰硕",
          mediaName: "机器人产业网",
          date: "2023-03-18",
          summary:
            "为期三天的展会吸引了众多专业观众，展商反响热烈，现场签约金额超过10亿元。",
          mediaLogo:
            "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=60&h=60&fit=crop",
        },
        {
          id: 2,
          title: "智能制造新趋势，机器人产业迎来新机遇",
          mediaName: "科技日报",
          date: "2023-03-17",
          summary:
            "展会展示了机器人技术的最新发展，为制造业转型升级提供了新的解决方案。",
          mediaLogo:
            "https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=60&h=60&fit=crop",
        },
      ],
    };

    // 展商分类
    const exhibitorCategories = computed(() => {
      if (!exhibition.value?.exhibitorsList) return [];
      return [
        ...new Set(exhibition.value.exhibitorsList.map((e) => e.category)),
      ];
    });

    // 过滤后的展商列表
    const filteredExhibitors = computed(() => {
      if (!exhibition.value?.exhibitorsList) return [];

      let filtered = exhibition.value.exhibitorsList;

      if (exhibitorSearch.value) {
        filtered = filtered.filter((exhibitor) =>
          exhibitor.name
            .toLowerCase()
            .includes(exhibitorSearch.value.toLowerCase())
        );
      }

      if (selectedCategory.value) {
        filtered = filtered.filter(
          (exhibitor) => exhibitor.category === selectedCategory.value
        );
      }

      return filtered;
    });

    // 加载展会信息
    const loadExhibition = () => {
      const exhibitionId = route.params.id || route.query.id;
      console.log("Loading exhibition:", exhibitionId);

      // 模拟API调用
      setTimeout(() => {
        exhibition.value = mockExhibition;
      }, 500);
    };

    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        upcoming: "即将开始",
        ongoing: "正在进行",
        completed: "已结束",
      };
      return statusMap[status] || "未知";
    };

    // 获取活动类型文本
    const getActivityTypeText = (type) => {
      const typeMap = {
        ceremony: "开幕式",
        forum: "论坛",
        launch: "发布会",
        conference: "会议",
        business: "商务对接",
      };
      return typeMap[type] || "活动";
    };

    // 过滤展商
    const filterExhibitors = () => {
      // 触发计算属性重新计算
    };

    // 查看展商详情
    const viewExhibitor = (exhibitor) => {
      router.push(`/exhibitor-detail?id=${exhibitor.id}`);
    };

    // 查看精彩瞬间
    const viewMoment = (moment) => {
      currentMoment.value = moment;
      imageViewerVisible.value = true;
    };

    // 查看媒体报道
    const viewReport = (report) => {
      ElMessage.info(`查看报道：${report.title}`);
    };

    onMounted(() => {
      loadExhibition();
    });

    return {
      exhibition,
      activeTab,
      exhibitorSearch,
      selectedCategory,
      exhibitorCategories,
      filteredExhibitors,
      imageViewerVisible,
      currentMoment,
      loadExhibition,
      getStatusText,
      getActivityTypeText,
      filterExhibitors,
      viewExhibitor,
      viewMoment,
      viewReport,
    };
  },
};
</script>

<style scoped>
.exhibition-detail {
  min-height: 100vh;
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
  color: white;
}

.page-header {
  padding: 20px 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.breadcrumb {
  color: white;
}

.breadcrumb :deep(.el-breadcrumb__inner) {
  color: white;
  cursor: pointer;
}

.breadcrumb :deep(.el-breadcrumb__inner:hover) {
  color: #ff6b35;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 展会基本信息 */
.exhibition-info-section {
  padding: 40px 0;
}

.exhibition-header {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 40px;
  align-items: start;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 30px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.exhibition-image {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}

.exhibition-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.exhibition-status {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
}

.exhibition-status.completed {
  background: rgba(103, 194, 58, 0.9);
  color: white;
}

.exhibition-status.ongoing {
  background: rgba(255, 107, 53, 0.9);
  color: white;
}

.exhibition-status.upcoming {
  background: rgba(64, 158, 255, 0.9);
  color: white;
}

.exhibition-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: white;
  line-height: 1.3;
}

.exhibition-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.meta-item {
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.meta-item .el-icon {
  margin-right: 8px;
  color: #ff6b35;
}

.exhibition-description {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 30px;
  opacity: 0.9;
}

.exhibition-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat-item {
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-number {
  display: block;
  font-size: 1.8rem;
  font-weight: bold;
  color: #ff6b35;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 详细信息标签页 */
.exhibition-details-section {
  padding: 40px 0;
}

.exhibition-tabs {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.tab-content {
  padding: 20px 0;
}

/* 展会概况标签页 */
.overview-content h3 {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 30px 0 20px;
  color: #ff6b35;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 10px;
}

.overview-content h3:first-child {
  margin-top: 0;
}

.content-text p {
  line-height: 1.8;
  font-size: 1rem;
  margin-bottom: 20px;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.highlight-item {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.highlight-icon {
  margin-right: 15px;
  color: #ff6b35;
  font-size: 1.5rem;
}

.highlight-content h4 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.highlight-content p {
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.5;
}

.scope-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.category-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.category-item h4 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 15px;
  color: #ff6b35;
}

.category-item ul {
  list-style: none;
  padding: 0;
}

.category-item li {
  padding: 5px 0;
  padding-left: 20px;
  position: relative;
}

.category-item li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ff6b35;
  font-weight: bold;
}

/* 展商名录标签页 */
.exhibitors-filter {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.exhibitors-filter .el-input {
  flex: 1;
}

.exhibitors-filter .el-select {
  width: 200px;
}

.exhibitors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.exhibitor-card {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.exhibitor-card:hover {
  transform: translateY(-3px);
}

.exhibitor-logo {
  margin-right: 15px;
}

.exhibitor-logo img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.exhibitor-info {
  flex: 1;
}

.exhibitor-info h4 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.exhibitor-category {
  color: #ff6b35;
  font-size: 0.9rem;
  margin-bottom: 3px;
}

.exhibitor-country {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 5px;
}

.exhibitor-booth {
  font-size: 0.8rem;
  background: rgba(255, 107, 53, 0.2);
  color: #ff6b35;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
}

/* 活动安排标签页 */
.activities-timeline {
  position: relative;
}

.day-schedule {
  margin-bottom: 40px;
}

.day-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #ff6b35;
  border-left: 4px solid #ff6b35;
  padding-left: 15px;
}

.activities-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.activity-item {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.activity-time {
  width: 120px;
  font-weight: bold;
  color: #ff6b35;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-content h4 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.activity-content p {
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.5;
  margin-bottom: 10px;
}

.activity-meta {
  display: flex;
  gap: 20px;
  align-items: center;
}

.activity-location {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  opacity: 0.8;
}

.activity-location .el-icon {
  margin-right: 5px;
}

.activity-type {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: bold;
}

.activity-type.ceremony {
  background: rgba(255, 107, 53, 0.2);
  color: #ff6b35;
}
.activity-type.forum {
  background: rgba(64, 158, 255, 0.2);
  color: #409eff;
}
.activity-type.launch {
  background: rgba(103, 194, 58, 0.2);
  color: #67c23a;
}
.activity-type.conference {
  background: rgba(230, 162, 60, 0.2);
  color: #e6a23c;
}
.activity-type.business {
  background: rgba(245, 108, 108, 0.2);
  color: #f56c6c;
}

/* 展会回顾标签页 */
.review-content h3 {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 30px 0 20px;
  color: #ff6b35;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 10px;
}

.review-content h3:first-child {
  margin-top: 0;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.achievement-item {
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 30px 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.achievement-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: #ff6b35;
  margin-bottom: 10px;
}

.achievement-label {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.achievement-description {
  font-size: 0.9rem;
  opacity: 0.8;
}

.moments-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.moment-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.moment-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.moment-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.moment-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.moment-item:hover .moment-overlay {
  opacity: 1;
}

.moment-info {
  padding: 20px;
}

.moment-info h4 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.moment-info p {
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.5;
}

.media-reports {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.report-item {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.report-logo {
  margin-right: 20px;
}

.report-logo img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
}

.report-content {
  flex: 1;
}

.report-content h4 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.report-media {
  font-size: 0.8rem;
  color: #ff6b35;
  margin-bottom: 10px;
}

.report-content p {
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* 加载状态 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

/* 图片查看器 */
.image-viewer {
  text-align: center;
}

.image-info {
  margin-top: 20px;
}

.image-info h3 {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.image-info p {
  font-size: 1rem;
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .exhibition-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .exhibition-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .exhibitors-filter {
    flex-direction: column;
  }

  .exhibitors-filter .el-select {
    width: 100%;
  }

  .activity-item {
    flex-direction: column;
  }

  .activity-time {
    width: auto;
    margin-bottom: 10px;
  }

  .report-item {
    flex-direction: column;
  }

  .report-logo {
    margin-right: 0;
    margin-bottom: 15px;
    text-align: center;
  }
}

/* Element Plus 组件样式覆盖 */
.exhibition-detail :deep(.el-tabs__header) {
  background: transparent;
}

.exhibition-detail :deep(.el-tabs__nav-wrap::after) {
  background: rgba(255, 255, 255, 0.2);
}

.exhibition-detail :deep(.el-tabs__item) {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.exhibition-detail :deep(.el-tabs__item.is-active) {
  color: #ff6b35;
}

.exhibition-detail :deep(.el-tabs__active-bar) {
  background: #ff6b35;
}

.exhibition-detail :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.exhibition-detail :deep(.el-input__inner) {
  color: white !important;
}

.exhibition-detail :deep(.el-select .el-input__wrapper) {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
</style>
